<template>
  <div>
    <div class="title-header">
      <div class="line"></div>
      <h3>入库作业流</h3>
    </div>
    <el-row class="out-house-slow">
      <!-- <el-col :span="4">
        <div><span class="red"></span>被下游节点退回的单据数</div>
        <div class="green-style"><span class="green"></span>被下游节点退回的单据数</div>
        <div><span class="yellow"></span>被下游节点退回的单据数</div>
      </el-col> -->
      <div class="out-house center">
        <div class="out-start"></div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <!-- <p class="out-green"
             @click="circleOne">{{ countOne}}</p> -->
          <!-- <i class="iconfont">&#xe626;</i> -->
          <p class="out-edit-box">
            <!-- <span class="icon iconfont iconyubao"></span> -->
            <svg class="icon svg-icon"
                 aria-hidden="true">
              <use xlink:href="#iconyubao"></use>
            </svg>
          </p>
          <p class="out-title">到达预报</p>
          <p class="point"
             @click="circleOne">到达预报：<span class="tdcl">{{ countOne}}</span></p>
          <p class="link"
             @click="handleDialogForm">新增</p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <!-- <p class="out-red"
             @click="circleTwo">{{ countTwo}}</p>
          <p class="out-green"
             @click="circleThree">{{ countThree}}</p> -->
          <p class="out-edit-box">
            <svg class="icon svg-icon"
                 aria-hidden="true">
              <use xlink:href="#iconwuzichuku"></use>
            </svg>
          </p>
          <p class="out-title">验收入库</p>
          <p class="point"
             @click="circleTwo">验收修改：<span class="tdkp">{{ countTwo}}</span></p>
          <p class="point"
             @click="circleThree">验收入库：<span class="tdcl">{{ countThree}}</span></p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <!-- <p class="out-yellow"
             @click="circleFour">{{ countFour}}</p> -->
          <p class="out-edit-box">
            <svg class="icon svg-icon"
                 aria-hidden="true">
              <use xlink:href="#iconcundanshangzhang"></use>
            </svg>
          </p>
          <p class="out-title">验收复核</p>
          <p class="point"
             @click="circleFour">验收复核：<span class="tdcl">{{ countFour}}</span></p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <!-- <p class="out-green"
             @click="circleFive">{{ countFive}}</p> -->
          <p class="out-edit-box">
            <svg class="icon svg-icon"
                 aria-hidden="true">
              <use xlink:href="#iconfuhe"></use>
            </svg>
          </p>
          <p class="out-title">存单上账</p>
          <p class="point"
             @click="circleFive">转存单：<span class="tdkp">{{ countFive}}</span></p>
          <p class="point"
             @click="circleSix">存单处理：<span class="tdcl">{{ countSix}}</span></p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-start"></div>
      </div>
    </el-row>
    <el-row slot="status">
      <div class="out-house">
        <div class="out-three"
             @click="handleRouterPush({path:'/goods/enter/arrivalForecastList',name:'到达预报列表'})">
          <img src="@/assets/img/tdck.png" />
          <span class="out-title">到达预报</span>
        </div>
        <div class="out-three"
             @click="handleRouterPush({path:'/goods/enter/receiveNote',name:'验收单'})">
          <img src="@/assets/img/ckd.png" />
          <span class="out-title">验收单</span>
        </div>
        <div class="out-three"
             @click="handleRouterPush({path:'/goods/enter/depositReceipt',name:'存单'})">
          <img src="@/assets/img/cgsqck.png" />
          <span class="out-title">存单</span>
        </div>
      </div>
    </el-row>
    <br />
    <div class="title-header">
      <div class="line"></div>
      <h3>操作平台</h3>
    </div>
    <base-list ref="baselist"
               v-show="show"
               :condition="condition"
               :datas.sync="data"
               :pageSearch="pageSearch">
      <el-row slot="search"
              class="title-header">
        <h4>到达预报处理页面</h4>
      </el-row>
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               ref="aList"
               label-width="100px">
        <el-row>
          <el-col :span="8"
                  class="search-width6">
            <el-form-item label="到达预报单号">
              <el-input v-model="condition['search_LIKE_entrustNo']"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  class="search-width6">
            <el-form-item label="状态">
              <el-select v-model="condition['search_IN_status']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictPreStatus"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  class="search-width6">
            <el-form-item label="车船号">
              <el-input type="text"
                        v-model="condition['search_LIKE_transhipNo']"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  class="search-width6">
            <el-form-item label="预报来源">
              <el-select v-model="condition['search_EQ_sourceFrom']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictPresource"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ml-100"
                       @click="loadData">查 询</el-button>
            <el-button formVisible="true"
                       icon="el-icon-refresh"
                       @click="resuleBtn('aList')">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table slot="list"
                :data="data"
                border
                stripe
                show-summary
                :summary-method="getSummaries"
                max-height="550">
        <el-table-column type="index"
                         label="序号"
                         width="50"
                         align="center"></el-table-column>
        <el-table-column prop="entrustNo"
                         label="到达预报单号"
                         min-width="120"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         min-width="100">
          <template slot-scope="scope">
            {{ scope.row.status | _filterPreStatus}}
          </template>
        </el-table-column>
        <el-table-column prop="cargoOwnerName"
                         label="货主"
                         min-width="150"></el-table-column>
        <el-table-column prop="transhipNo"
                         label="车船号"
                         min-width="100"></el-table-column>
        <el-table-column prop="forecastNum"
                         label="预计件数"
                         min-width="100"></el-table-column>
        <el-table-column prop="forecastWeight"
                         label="预计重量（吨）"
                         min-width="120"></el-table-column>
        <el-table-column prop="transportWay"
                         label="运输方式"
                         min-width="100">
          <template slot-scope="scope">
            {{ scope.row.transportWay | _filterTransportModeType}}
          </template>
        </el-table-column>
        <el-table-column prop="startOffDate"
                         label="物资发运时间"
                         min-width="120"></el-table-column>
        <el-table-column prop="forecastArrivalDate"
                         label="预计到达时间"
                         min-width="120"></el-table-column>
        <el-table-column prop="sourceFrom"
                         label="预报来源"
                         min-width="100">
          <template slot-scope="scope">
            {{ scope.row.sourceFrom | _filterPresource}}
          </template>
        </el-table-column>
        <el-table-column prop="createBy"
                         label="创建人"
                         min-width="100"></el-table-column>
        <el-table-column prop="createDateTime"
                         label="创建时间"
                         min-width="180"></el-table-column>
        <el-table-column label="操作"
                         align="center"
                         min-width="240"
                         fixed="right">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="handleViewDialogForm(scope.row)">查看</el-button>
            <el-button type="text"
                       size="small"
                       :disabled="scope.row.status !== 'NOACCEPT'"
                       @click="handleDialogForm(scope.row,true)">编辑</el-button>
            <el-button type="text"
                       size="small"
                       @click="handlePrint(scope.row)">打印</el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       :disabled="scope.row.status !== 'NOACCEPT'"
                       @click.stop="handleRemove(scope.row)">删除
            </el-button>
            <el-button type="text"
                       size="small"
                       v-show="scope.row.transportWay === 'CR'"
                       :disabled="scope.row.status !== 'NOACCEPT'"
                       @click="confirmForecast(scope.row)">预报确认</el-button>
            <el-button type="text"
                       size="small"
                       v-show="scope.row.transportWay === 'CR'"
                       :disabled="scope.row.status !== 'NOOPERATE'"
                       @click="consoleForecast(scope.row)">取消确认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </base-list>
    <!-- 验收修改 -->
    <acceptance-modify-com v-show="show2"
                           ref="acceptanceModifyCom"></acceptance-modify-com>
    <!-- 验收入库 -->
    <acceptance-enter-com v-show="show3"
                          ref="acceptanceEnterCom"></acceptance-enter-com>
    <!-- 验收复核 -->
    <acceptance-check-com v-show="show4"
                          ref="acceptanceCheckCom"></acceptance-check-com>
    <!-- 转存单 -->
    <deposit-slip-com v-show="show5"
                      ref="depositSlipCom"></deposit-slip-com>
    <!-- 存单处理 -->
    <deposit-receipt-com v-show="show6"
                         ref="depositReceiptCom"></deposit-receipt-com>
    <!-- 查看到达预报 -->
    <view-arrival-forecast-form ref="viewArrivalForecastForm"></view-arrival-forecast-form>
    <!-- 新增到达预报 -->
    <add-arrival-forecast-form ref="addArrivalForecastForm"
                               @load="loadData"></add-arrival-forecast-form>
    <!-- 打印  -->
    <!-- <arrival-forecast ref="arrivalForecast"></arrival-forecast> -->
  </div>
</template>

<script>
import {
  getTotalData,
  getArrivalForecastList,
  getArrivalForecastDetail,
  deleteArrivalForecast,
  comfirmArrivalForecast,
  cancelArrivalForecast
} from '@/api/enter/arrivalForecast'
import { getCargoNameList } from '@/api/things/accountPageList' //品名
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import viewArrivalForecastForm from './enter/viewArrivalForecastForm' //查看到达预报
import addArrivalForecastForm from './enter/addArrivalForecastForm' //新增到达预报
import acceptanceModifyCom from './enter/content/acceptanceModifyCom'
import acceptanceEnterCom from './enter/content/acceptanceEnterCom'
import acceptanceCheckCom from './enter/content/acceptanceCheckCom'
import depositSlipCom from './enter/content/depositSlipCom'
import depositReceiptCom from './enter/content/depositReceiptCom'
// import arrivalForecast from '@/views//business/print/arrivalForecast'

export default {
  name: 'enter',
  components: {
    autoSearchDic,
    viewArrivalForecastForm,
    addArrivalForecastForm,
    acceptanceModifyCom,
    acceptanceEnterCom,
    acceptanceCheckCom,
    depositSlipCom,
    depositReceiptCom
    // arrivalForecast
  },
  data() {
    return {
      form: this.clearForm(),
      pageSearch: getArrivalForecastList, // 分页查询api接口
      condition: {},
      data: [],
      show: true,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      countOne: 0,
      countTwo: 0,
      countThree: 0,
      countFour: 0,
      countFive: 0,
      countSix: 0,
      component: '',
      warehouseList: [], //仓库
      cargoNameList: [] //货名
    }
  },
  mounted() {
    //入库工作台-首页统计数据
    getTotalData().then(res => {
      this.countOne = res.data.noEntrustCount //到达预报个数
      this.countTwo = res.data.updateCheckAcceptCount //验收修改个数
      this.countThree = res.data.checkAcceptCount //验收入库个数
      this.countFour = res.data.waitCheckAcceptCount //验收复核个数
      this.countFive = res.data.finishCheckAcceptCount //转存单个数
      this.countSix = res.data.noAccountCount //存单处理个数
    })
    this.$nextTick(() => {
      this.loadData()
    })
    //获取品名
    getCargoNameList(this.$store.state.user.currentUser.org.id).then(res => {
      this.cargoNameList = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {}
    },
    //查看
    handleViewDialogForm(item) {
      getArrivalForecastDetail(item.entrustNo).then(res => {
        console.log('data', res.data)
        this.$refs.viewArrivalForecastForm.form = res.data
      })
      this.$refs.viewArrivalForecastForm.dialogForm = true
    },
    //编辑
    handleDialogForm(item, bool) {
      if (bool) {
        console.log('编辑', item)
        this.$refs.addArrivalForecastForm.form = JSON.parse(
          JSON.stringify(item)
        )
        this.$refs.addArrivalForecastForm.form.details = item.detailVoList
        this.$refs.addArrivalForecastForm.isEdit = true
        this.$refs.addArrivalForecastForm.dialogForm = true
      } else {
        this.$refs.addArrivalForecastForm.dialogForm = true
      }
    },
    loadData() {
      this.$refs.baselist.loadData()
    },
    circleOne() {
      this.show = true
      this.show2 = false
      this.show3 = false
      this.show4 = false
      this.show5 = false
      this.show6 = false
    },
    circleTwo() {
      this.show = false
      this.show2 = true
      this.show3 = false
      this.show4 = false
      this.show5 = false
      this.show6 = false
    },
    circleThree() {
      this.show = false
      this.show2 = false
      this.show3 = true
      this.show4 = false
      this.show5 = false
      this.show6 = false
    },
    circleFour() {
      this.show = false
      this.show2 = false
      this.show3 = false
      this.show4 = true
      this.show5 = false
      this.show6 = false
    },
    circleFive() {
      this.show = false
      this.show2 = false
      this.show3 = false
      this.show4 = false
      this.show5 = true
      this.show6 = false
    },
    circleSix() {
      this.show = false
      this.show2 = false
      this.show3 = false
      this.show4 = false
      this.show5 = false
      this.show6 = true
    },
    //打印
    handlePrint(item) {
      console.log('打印', item)
      const origin = window.location.origin + window.location.pathname
      // window.open(origin + '/#/UnboxPrint/' + item.entrustNo)
      window.open(origin + '/#/ArrivalForecast/' + item.entrustNo)
    },
    //预报确认
    confirmForecast(item) {
      this.$confirm(`是否预报确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          comfirmArrivalForecast(item.entrustNo).then(res => {
            this.$message({
              type: 'success',
              message: `预报确认成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //取消确认
    consoleForecast(item) {
      this.$confirm(`是否取消预报确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          cancelArrivalForecast(item.entrustNo).then(res => {
            this.$message({
              type: 'success',
              message: `取消成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //删除
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteArrivalForecast(item.entrustNo).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (
          column.property === 'forecastNum' ||
          column.property === 'forecastWeight'
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index]
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    //重置
    resuleBtn(aList) {
      this.$refs[aList].resetFields()
      this.condition = this.clearForm()
    },
    //返回
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>
<style scoped>
@font-face {
  font-family: 'iconfont'; /* project id 1072096 */
  src: url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.eot');
  src: url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.eot?#iefix')
      format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.woff') format('woff'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.svg#iconfont') format('svg');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.title-header {
  width: 90%;
  display: flex;
  height: 30px;
  margin-bottom: 20px;
}
h3 {
  margin-left: 10px;
}
.line {
  border-left: solid 5px #00a1ff;
  height: 18px;
  margin-top: 5px;
}
.out-house-slow {
  border: 1px solid #e3e3e3;
  padding: 20px;
  margin-bottom: 10px;
}
.out-house {
  display: flex;
  align-items: center;
}
.center {
  margin: 0 auto;
  width: 1200px;
}
.legend {
  display: inline-block;
  width: 32px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}
.legend1 {
  background-color: red;
}
.legend2 {
  background-color: green;
}
.out-start {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #3266cc;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* Internet Explorer */
  -moz-transform: rotate(45deg);
  /* Firefox */
  -webkit-transform: rotate(45deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
  /* Opera */
}
.out-start1 {
  width: 100px;
}
.out-jiantou {
  display: inline-block;
  width: 50px;
  height: 10px;
  background-color: #3266cc;
}
.out-first {
  width: 114px;
  height: 120px;
  border: 2px solid #3a79d8;
  padding: 10px;
  border-radius: 6px;
  position: relative;
}
.out-second {
  width: 114px;
  padding: 10px;
  border-radius: 6px;
  position: relative;
  border: 2px solid #3a79d8;
  text-align: center;
}
.out-three {
  width: 180px;
  padding: 10px;
  margin-right: 10px;
  border-radius: 6px;
  box-shadow: 0px 0px 9px #ddd;
  text-align: center;
}
.out-second img,
.out-three img {
  vertical-align: middle;
}
.green-style {
  margin-top: 10px;
  margin-bottom: 10px;
}
.yellow {
  padding-left: 30px;
  background: #ffd900;
  color: #fff;
  border-radius: 50% / 50%;
}
.red {
  padding-left: 30px;
  background: #f50627;
  color: #fff;
  border-radius: 50% / 50%;
}
.green {
  padding-left: 30px;
  background: #5daf34;
  color: #fff;
  border-radius: 50% / 50%;
}
.out-green {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding-left: 10px;
  background: #5daf34;
  border-radius: 50% / 50%;
  color: #fff;
}
.out-red {
  position: absolute;
  top: -8px;
  right: 30px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding-left: 10px;
  background: #f50627;
  border-radius: 50% / 50%;
  color: #fff;
}
.out-yellow {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding-left: 10px;
  background: #ffd900;
  color: #fff;
  border-radius: 50% / 50%;
}
.out-edit {
  text-align: center;
  font-size: 30px;
  color: #3a79d8;
}
.out-edit-box {
  text-align: center;
}
.out-edit-box img {
  height: 37px;
}
.out-jt {
  margin: 0 20px;
}
.out-jt i {
  font-size: 30px;
}
.out-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.point {
  cursor: pointer;
}
.tdkp {
  color: red;
  font-weight: 600;
}
.tdcl {
  color: #409cff;
  font-weight: 600;
}
.icon-size {
  font-size: 40px;
}
.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 65px;
}
.bottom-tdkp {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 0px 6px;
  background: red;
  border-radius: 8px;
  color: #fff;
  line-height: 16px;
}
.gg-input {
  margin-bottom: 0 !important;
}
.gg-input .el-form-item__content .el-input {
  width: 100px !important;
}
.gg-input .el-form-item__content .el-autocomplete {
  width: 100px !important;
}
.link {
  cursor: pointer;
  color: #00a1ff;
  margin: 5px auto;
  width: 50px;
}
</style>